<template>
  <div class="layout-content">
    <div class="layout-search">
      <form class="form-inline">
        <div class="form-group">
          <label for="exampleInputEmail3"></label>
          <input type="text" class="form-control" id="exampleInputEmail3" placeholder="请输入账户">
        </div>
        <div class="form-group">
          <label for="exampleInputInviteCode3"></label>
          <input type="password" class="form-control" id="exampleInputInviteCode3"
                 placeholder="请选择时间">
        </div>
        <button type="button" class="btn btn-info">查询</button>
      </form>
    </div>
    <div class="layout-result">
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>姓名</th>
            <th>账户</th>
            <th>密码</th>
            <th>性别</th>
            <th>头像</th>
            <th>邮件</th>
            <th>电话</th>
            <th>QQ</th>
            <th>注册时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <template v-for="item of items">
            <tr>
              <td>{{item.userName}}</td>
              <td>{{item.userAccount}}</td>
              <td>{{item.userPassword}}</td>
              <td>{{item.userSex}}</td>
              <td>{{item.userPhoto}}</td>
              <td>{{item.userEmail}}</td>
              <td>{{item.userMobile}}</td>
              <td>{{item.userQQ}}</td>
              <td>{{item.userRegisterTime}}</td>
              <td><a href="javascript:;" class="btn btn-xs btn-danger" @click="deleteUser(item)">删除</a>
                <a href="javascript:;" class="btn btn-xs btn-danger" @click="resetUserPwd(item)">重置密码</a>
              </td>
            </tr>
          </template>


        </tbody>

      </table>

    </div>
  </div>
</template>

<style scoped>
  .table > thead > tr > th {
    background: #03B8CF;
    color: #fff;
  }
</style>

<script>
  import adminService from '@/service/adminService';
  export default{
    data(){
      return {
        items: []
      }
    },
    mounted(){
      document.title = '用户管理';
      this.userList();
    },
    methods: {
      async userList(){
        let data = await adminService.userList();
        if ( data.code ) {
          this.items = data.data;
        } else {
          this.items = [];
        }

      },
      async deleteUser( item ){
        let data = await adminService.deleteUser( item.userID );
        if ( data.code ) {
          let index = this.items.indexOf( item );
          this.items.splice( index, 1 );
        }
      },
      async resetUserPwd(item){
        let data = await adminService.resetUserPassword(item.userID);
        console.log(data);
      }
    }
  }
</script>
